<template>
	<!-- 必到-首页 -->
	<view>
		<!-- 导航 -->
		<view>
			<u-navbar back-text="全部评价" :border-bottom="false" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		</view>
		<mescroll-body top="0" :down="downOption" :up="upOption" ref="mescrollRef" :fixed="true" :height="comHeight" :topbar="false"
		 bottom="0" :bottombar="true" :safearea="false" @init="mescrollInit" @down="downCallback">
		 <!-- @tap="jump(item.appraiseId)" -->
		<view class="wrap" v-for="(item,index) in allList"   :key="index">
			<view class="introduce" style="border-bottom: 1px solid #DEDEDE;padding-top: 0;">
				<view class="pjList">
					<view class="curser" style="width: 100%;">
						<image :src="item.portrait" mode=""></image>
						<view class="yonghu"style="width: 82%;">
							<view class="yonghu_nam">
								<view class="yonghu_mcs">
									{{item.nickName}}
								</view>
								<view class="yonghu_data">
									{{item.fmtCommentDatetime}}
								</view>
							</view>
							<u-rate :count="count" v-bind:value.sync="item.formatScore" :disabled="true" active-color="#F29423"></u-rate>
							<text>{{item.formatScore}}</text>
						</view>
					</view>
				</view>
				<view class="pingyu">
					{{item.comments}}
				</view>
				<view v-if="item.images" class="pircture">
					<view v-for="(ite,uin) in (item.images).split(',')" :key="uin">
						<image :src="ite" mode=""></image>
					</view>
				</view>
				<view class="neirong">
					{{item.name}}
				</view>
			</view>
	
			
		</view>
		 <view style="margin-top: 50rpx;" v-if="!showList||allList.length==0">
		 	<u-divider color="#DEDEDE" half-width="120" border-color="#DEDEDE">{{prompt}}</u-divider>
		 </view>
		</mescroll-body>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textStyle: {
					color: '#272755'
				},
				count: 5,
				value: 4.5,
				cateId:'',
				enterpriseId:'',
				page: 1,
				pageSize: 16,
				prompt: '加载中....',
				showList:false,
				totalPage:1,
				// 下拉刷新配置
				downOption: {
					use: true,
					auto: false,
					offset: 40
				},
				upOption: {
					use: true,
					auto: false
				},
				mescroll: null,
				allList:[],
				comHeight:0,
			}
		},
		onLoad(option) {
			var that = this;
			var menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const {
				top,
				width,
				height,
				right
			} = menuButtonInfo;
			uni.getSystemInfo({
				success: res => {
					const {
						statusBarHeight
					} = res;
					const margin = top - statusBarHeight;
					var navHeight = height + statusBarHeight + margin * 4;
					that.comHeight = (res.windowHeight - navHeight) + 'px';
					console.log(that.comHeight);
				}
			});
			that.cateId = option.packageBusinessId
			that.enterpriseId = option.enterpriseId
			that.getAll();// 获取评价列表
		},
		onReachBottom() {
			if(this.totalPage == this.page){
				return false;
			}else{
				this.page += 1;
				// this.page = 1;
				this.getAll();
			}
		},
		methods: {
			jump(appraiseId){
				uni.navigateTo({
					url:'./pjxq?appraiseId='+appraiseId
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新回调函数
			downCallback() {
				setTimeout(() => {
					this.page = 1;
					this.allList = [];
					this.prompt = '加载中....';
					this.getAll();
					this.mescroll.endSuccess();
				}, 2000);
			},
			// 获取评价列表
			getAll(){
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'appraise/package',
				};
				let data = {
					enterpriseId:_this.enterpriseId,
					packageBusinessId:_this.cateId,
					page: _this.page,
					pageSize: _this.pageSize,
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code = 200){
						_this.totalPage=res.data.pages;
						if (res.data.records.length > 0 || _this.page != 1) {
							_this.showList = false;
							if (res.data.current * res.data.size < res.data.total) {
								for (const key in res.data.records) {
									_this.allList.push(res.data.records[key]);
								}
								_this.prompt = '加载中....';
							} else {
								for (const key in res.data.records) {
									_this.allList.push(res.data.records[key]);
								}
								_this.prompt = '没有更多了';
							}
						} else {
							_this.showList = true;
							_this.prompt = '没有更多了';
							_this.allList = []
						}
					}else{
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding: 0 !important;
	}

	.introduce {
		padding: 34rpx 40rpx 0 42rpx;
	}

	.pjList {
		display: flex;
		margin-top: 42rpx;
	}

	.curser {
		display: flex;
		align-items: center;
	}

	.curser image {
		width: 94rpx;
		height: 94rpx;
		border-radius: 50%;
	}

	.yonghu {
		margin-left: 26rpx;
	}

	.yonghu text {
		color: #F29423;
	}

	.yonghu_nam {
		display: flex;
		margin-bottom: 8rpx;
	}

	.yonghu_mcs {
		color: #272755;
		font-size: 30rpx;
		font-weight: bold;
		width: 50%;
		overflow: hidden;
		white-space: nowrap;text-overflow:ellipsis;
	}

	.yonghu_data {
		font-size: 26rpx;
		color: #9393AA;
		font-weight: 500;
		width: 50%;
		text-align: right;
	}

	.pingyu {
		margin-top: 26rpx;
		color: #9393AA;
		font-size: 26rpx;
	}

	.pircture {
		display: flex;
		padding: 26rpx 0 0 0;
	}

	.pircture view {
		padding-right: 24rpx;
	}

	.pircture image {
		width: 152rpx;
		height: 158rpx;
	}

	.neirong {
		color: #9E9EB2;
		font-size: 26rpx;
		padding: 18rpx 0 24rpx 0;
	}
</style>
